<template>
  <div class="hello">
    
    <h1>{{ msg }}</h1>
    <van-button plain hairline type="primary">细边框按钮</van-button>
    <van-button plain hairline type="info" @click="showPopup">
      展示弹出层
      <van-icon name="chat-o" />
    </van-button>

    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '30%' }"
    />

    <van-collapse v-model="activeNames" >
      <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
      <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
      <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      show: false,
      activeNames: ['1']
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-swipe {
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #5b707e;
  }
}

$color: rgb(194, 125, 36);
$border-color: red;
$border: 1px solid $border-color;
$width: 200px;
h1 {
  width: $width;

  color: $color;
  border: $border;
}
</style>
